<template>
	<comRoot>
		<template #page>
			<view class="competition-hallfame-page font-hanserif-bold">
				<!-- 自定义导航栏 -->
				<comDetailNavigateBack title="爬塔记录" />

				<!-- 页面背景 -->
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink"
					:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />

				<view class="tab-content flex-justify-content-center relative">
					<view class="tabbox-list flex relative">
						<view class="tabbox-item" v-for="(tab, index) in tabAreaList" :key="tab.id" :id="tab.id"
							:data-current="index" @click="handleTab(index)">
							<view
								class="tabbox-item-txt text-nowrap relative flex flex-justify-content-center flex-align-items-center">
								<view class="item-detail relative flex flex-all-center"
									:class="[tabIndex === index ? 'item-active' : '']" :style="{
										width: tab.imgWidth,
										height: tab.imgHeight,
										minWidth: 'unset',
										maxWidth: 'unset',
									}">
									<image :style="{ height: tab.imgHeight }" mode="heightFix" v-if="tabIndex === index"
										:src="`${commonConfigs.domainFrontFileLink}${tab.tabBgImgActive || tab.tabBgImg}`" />
									<image :style="{ height: tab.imgHeight }" mode="heightFix" v-else
										:src="`${commonConfigs.domainFrontFileLink}${tab.tabBgImg}`" />

									<view class="absolute flex-all-center"
										style="width: 100%;height: 100%;">{{ tab.text || tab.name }}</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<template v-if="tabIndex === 0">
					<view class="box mx-auto relative" :style="{
							width: '710rpx',
							height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx)',
							position: 'relative',
							left: 0,
							right: 0,
							margin: 'auto',
						}">

						<view class="left-box absolute" :style="{
							height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx - 40rpx)'
						}">
							<view 
								:class="['sub-item', 'relative', 'flex-all-center', subIndex === item.gyms_scene_id ? 'active' : '']"
								v-for="(item, index) in levelList"
								:key="index" @click="subTab(item)">
								<image class="bg" v-if="subIndex === item.gyms_scene_id"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-sub-tab-active.png`"
									mode=""></image>
								<image class="bg" v-else
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-sub-tab.png`"
									mode=""></image>
								<view class="item-text1 relative">第 {{ numToTextList[item.sort] }} 层</view>
								<!-- <view class="item-text2 relative">{{ item.name }}</view> -->
							</view>
						</view>

						<scroll-view scroll-y class="right-box absolute" :style="{
							height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx - 34rpx - 18rpx - 20rpx)',
						}">
							<view class="sub-list relative flex-align-items-center" v-for="(item, index) in resLists"
								:key="index">
								<image class="bg"
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-sub-list-bg.png`"
									mode=""></image>
									
								<view class="info-head-cover relative flex-all-center">
									<image class="info-head-img" :src="item.avatar" mode=""></image>
									
									<image class="absolute" v-if="item.vip_cover" :src="item.vip_cover" mode="heightFix"
										:style="{
											'z-index': 1,
											'top': '-20rpx',
											'left': '-26rpx',
											'right': 0,
											'margin': 'auto',
											'width': 'auto',
											'height': '114rpx',
											'border-radius': 'unset',
										}"></image>
								</view>
								
								<view class="relative list-center flex">
									<view class="center-name truncate">{{ item.nickname }}</view>
									<view class="center-time truncate">{{ item.create_time }}</view>
								</view>
								<view class="relative list-right flex flex-align-items-center">
									<image class="right-type relative"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + item.reward_item_type.toLowerCase() + '.png'"
										mode="heightFix"></image>
									<view class="right-name truncate">{{ item.reward_item_name }}</view>
								</view>
							</view>
							<view v-if="!resLists.length"
								class="flex flex-align-items-center flex-justify-content-center" style="height: 100%">
								<view class="flex-all-center">
									<comEmptyData style="width: 300rpx;height: 300rpx;"></comEmptyData>
								</view>
							</view>
							<view v-else style="margin-top: 20rpx; font-size: 20rpx; color: #666; text-align: center;">
								————仅展示最新十二条记录————</view>
						</scroll-view>
					</view>
				</template>
				<template v-else-if="tabIndex === 1">
					<scroll-view scroll-y :style="{
						width: '710rpx',
						height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx)',
						position: 'relative',
						left: 0,
						right: 0,
						margin: 'auto',
					}">
						<view class="emperor-list relative mx-auto flex-align-items-center"
							v-for="(item, index) in resLists" :key="index">
							<!-- 背景 -->
							<image class="bg"
								:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-item-bg.png`"
								mode=""></image>

							<view class="emperor-tips flex-base relative flex-all-center">
								<image
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-item1.png`"
									v-if="index === 0" mode="heightFix"></image>
								<image
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-item2.png`"
									v-else-if="index === 1" mode="heightFix"></image>
								<image
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-item3.png`"
									v-else-if="index === 2" mode="heightFix"></image>
								<view v-else class="relative flex-all-center" style="width: 74rpx;height: 74rpx;left: 12rpx;">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/competition-item-sort.png`"
										mode=""></image>
									<view class="relative">{{ index+1 }}</view>
								</view>
							</view>

							<view class="emperor-left relative flex-all-center">
								<view class="info-head-cover relative flex-all-center">
									<image class="info-head-img" :src="item.avatar" mode=""></image>
									
									<image class="absolute" v-if="item.vip_cover" :src="item.vip_cover" mode="heightFix"
										:style="{
											'z-index': 1,
											'top': '-20rpx',
											'left': '-20rpx',
											'right': 0,
											'margin': 'auto',
											'width': 'auto',
											'height': '114rpx',
											'border-radius': 'unset',
										}"></image>
								</view>
							</view>
							<view class="emperor-center flex relative">
								<view class="center-name truncate">{{ item.nickname }}</view>
								<view class="center-time truncate">{{ item.finish_time }}</view>
							</view>
							<view class="emperor-right flex relative">
								<view class="right-type">完成挑战</view>
								<view class="right-name truncate text-nowrap">发数：<text class="num">{{ item.reward_num }}</text></view>
							</view>
						</view>
						<view v-if="!resLists.length" class="flex-align-items-center flex-justify-content-center"
							style="height: 100%">
							<view class="flex-all-center">
								<comEmptyData style="width: 300rpx;height: 300rpx;"></comEmptyData>
							</view>
						</view>
						<view v-else style="margin-top: 20rpx; font-size: 20rpx; color: #666; text-align: center;">
							————仅展示前十名欧皇————</view>
					</scroll-view>
				</template>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import {
		getHallOfFameListApi, // 名人堂,鸿运榜
		getMedalStatusApi
	} from '@/setupproject/INTERFACE';

	import pager from '@/inmixed/paging.mixin.js';

	export default {
		name: 'competitionHallFamePage',
		mixins: [pager],
		data() {
			return {
				numToTextList: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
				tabAreaList: [{
						type: 1,
						text: '名人堂',
						imgWidth: '162rpx',
						imgHeight: '56rpx',
						tabBgImg: '/files/images/common/tabarea-item.png', 
						tabBgImgActive: '/files/images/common/tabarea-item-active.png'
					},
					{
						type: 2,
						text: '鸿运榜',
						imgWidth: '162rpx',
						imgHeight: '56rpx',
						tabBgImg: '/files/images/common/tabarea-item.png',
						tabBgImgActive: '/files/images/common/tabarea-item-active.png'
					},
				],
				levelList: [],
				gyms_id: '',
				tabIndex: 0,
				subIndex: '',
				loading: false,
			};
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			showLoadedText() {
				return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
			}
		},
		async onLoad({
			gyms_id
		}) {
			this.gyms_id = gyms_id;
			this.getMedalStatusFun();
		},
		methods: {
			handleTab(index) {
				this.tabIndex = index;
				this.pagingInitFun();
				this.resListsGetFun();
			},
			subTab(item) {
				this.subIndex = item.gyms_scene_id;
				this.pagingInitFun();
				this.resListsGetFun();
			},
			/* 需要固定为listsGetFun；以配合 pager.mixin */
			async listsGetFun(e) {
				let sendData = {
					gyms_id: this.gyms_id, //道馆赛ID
					type: this.tabAreaList[this.tabIndex].type
				}
				if (this.tabIndex === 0) {
					this.pageInfoObj.page_size = 12;
					sendData = {
						...this.pageInfoObj,
						...sendData
					};
					sendData.gyms_scene_id = this.subIndex;
				} else {}
				this.loading = true;
				const {
					data,
					code,
				} = await getHallOfFameListApi(sendData);

				this.loading = false;

				if (code !== 200) return false;

				const resLists = data.rows;
				console.log('resLists', resLists)
				/* 返回 到 pager.mixin 处理 */
				return {
					resLists,
					count: data.total
				}
			},
			async getMedalStatusFun() {
				const {
					data,
					code,
					msg
				} = await getMedalStatusApi({
					gyms_id: this.gyms_id
				});

				if (code !== 200) {
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}
				this.levelList = data.list;
				this.subIndex = this.levelList[0].gyms_scene_id;
				this.pagingInitFun();
				this.resListsGetFun();
			},
		}
	};
</script>

<style lang="scss" scoped>
	.tab-content {
		height: 62rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		overflow-x: auto;

		.tabbox-list {
			height: 100%;
			width: auto;

			.tabbox-item {
				padding-right: 16rpx;

				.tabbox-item-txt {
					.item-detail {
						font-size: 28rpx;
						margin-left: 32rpx;
						text-align: center;
						min-width: 162rpx;
						max-width: 162rpx;
						color: #53575A;
						&.item-active {
							color: #FFFFFF;
							font-size: 28rpx;
						}
					}
				}
			}

		}
	}

	.box {
		width: 740rpx;

		.left-bg {
			left: 0;
			bottom: 0;
			width: 390rpx;
			height: 390rpx;
		}

		.left-box {
			left: 18rpx;
			top: 32rpx;
			width: 120rpx;
			overflow-y: auto;

			.sub-item {
				width: 120rpx;
				height: 62rpx;
				margin-bottom: 20rpx;
				flex-direction: column;
				color: #8598D3;
				
				&.active {
					color: #FFFFFF;
				}

				.item-text1 {
					font-size: 28rpx;
				}

				.item-text2 {
					font-size: 36rpx;
					white-space: nowrap;
				}
			}
		}

		.right-box {
			left: 150rpx;
			top: 32rpx;
			width: 560rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.sub-list {
				width: 560rpx;
				height: 114rpx;
				padding: 0 20rpx 0 28rpx;
				margin-left: 6rpx;
				margin-bottom: 20rpx;

				.info-head-cover {
					width: 78rpx;
					height: 78rpx;
					border-radius: 100%;
					margin: 0 18rpx;
							
					.info-head-img {
						width: 66rpx;
						height: 66rpx;
						border-radius: 100%;
					}
				}

				.list-center {
					margin-left: 14rpx;
					margin-right: 20rpx;
					width: 240rpx;
					flex-direction: column;
					color: #111111;

					.center-name {
						width: 220rpx;
						font-size: 28rpx;
						color: #111111;
					}

					.center-time {
						margin-top: 4rpx;
						font-size: 22rpx;
						color: #666666;
					}
				}

				.list-right {
					width: 126rpx;
					flex-direction: column;
					justify-content: flex-end;
					text-align: center;
					color: #fff;

					.right-type {
						width: 40rpx;
						height: 34rpx;
					}

					.right-name {
						width: 100rpx;
						font-size: 22rpx;
						color: #111111;
					}
				}
			}
		}
	}

	.emperor-list {
		width: 710rpx;
		height: 114rpx;
		margin-top: 20rpx;
		font-size: 28rpx;
		color: #111111;
		padding-right: 20rpx;

		.emperor-tips {
			left: 0;
			top: 0;
			z-index: 10;
			width: 130rpx;
			height: 100%;
			font-size: 34rpx;
			color: #6B88BE;
			line-height: 10rpx;
			
			& > image {
				width: 100rpx;
				height: 92rpx;
			}
		}

		.emperor-left {
			width: 210rpx;
			height: 100%;

			.info-head-cover {
				width: 78rpx;
				height: 78rpx;
				border-radius: 100%;
				margin: 0 18rpx;
				
				.info-head-img {
					width: 66rpx;
					height: 66rpx;
					border-radius: 100%;
				}
			}
		}

		.emperor-center {
			margin-left: 18rpx;
			margin-right: 20rpx;
			width: 400rpx;
			flex-direction: column;

			.center-name {
				width: 220rpx;
				font-size: 28rpx;
				color: #111111;
			}
			
			.center-time {
				font-size: 22rpx;
				color: #666666;
			}
		}

		.emperor-right {
			width: 180rpx;
			flex-direction: column;
			justify-content: flex-end;
			text-align: left;
			white-space: nowrap;
			font-size: 22rpx;
			color: #666666;

			.right-type {
				width: 40rpx;
				height: 34rpx;
				font-size: 28rpx;
			}

			.right-name {
				width: 100%;
				font-size: 24rpx;
				color: #111111;
				
				.num {
					font-size: 28rpx;
					color: #FF8B1D;
				}
			}
		}
	}
</style>